<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>欢乐豆记录</title>
		<script src="js/jquery-1.9.1.min.js"></script>
		
		<!-- 引入jquery-ui插件 -->
		<link rel="stylesheet" type="text/css" href="plugins/jquery-ui.min.css"/>
		<script type="text/javascript" src="plugins/jquery-ui-1.9.2.custom.min.js"></script>
		
		
		<script>
			//页面加载时触发
			$(function(){
				//查询订单记录的接口
				queryOrderList();
			});
			
			//查询充值订单列表
			function queryOrderList(){
				
				//获取当前登录用户id
				var uid = localStorage.getItem("uid");
				
				$.ajax({
					type: "GET",
					url: "http://localhost:8080/order/list",
					data: {
						uid: uid
					},
					success: function(data){
						console.log(data);
						
						for(var i = 0; i < data.length; i++){
							var item = data[i];
							var html = "<tr><td>" + item.orderId + "</td> <td>"
							 + item.money + "</td> <td>"
							 + item.beanNumber + "</td> <td>" 
							 + item.createTime + "</td> <td>" 
							 + (item.status == 1 ? "已支付" : "<button onclick=\"goPay('" + item.orderId + "')\">去支付</button>") + "</td></tr>";
							 
							$("#mytbody").append(html); 
						}
					}
				});
			}
			
			/**
			 * 去支付
			 */
			var orderId = null;
			function goPay(orderid){
				orderId = orderid;
				//alert("去支付！" + orderid);
				
				//弹出一个支付成功的弹出框，让用户支付完成后点击
				$("#paydialog").dialog({
					title: "支付中",
					width: 400,
					height: 300
				});
				
				//打开一个新页签，进行支付宝支付
				window.open("http://localhost:8080/order/pay?orderid=" + orderid);
			}
			
			/**
			 * 支付结果的查询
			 */
			function payQuery(){
				// alert("查询支付结果的订单：" + orderId);
				
				//发送请求给后端，进行订单交易的查询
				$.ajax({
					type: "GET",
					url: "http://localhost:8080/pay/query",
					data: {
						orderid: orderId
					},
					success: function(data){
						//data > 0  支付成功  最新的欢乐豆数量
						//data -1 支付还未成功
						if(data > 0){
							//支付成功
							$("#paydialog").dialog("close");
							//更新浏览器保存的欢乐豆数量
							localStorage.setItem("happyBean", data);
						} else {
							//支付还未成功
							alert("交易未完成！");
						}
					}
				});
				
			}
		</script>
		<style>
			.body_class {
				display: flex;
				flex-direction: column;
				align-items: center;
			}
			
			.table_class {
				width: 100%;
				text-align: center;
			}
			
			.table_class td{
				padding: 20px;
				border: 1px solid white;
			}
			
			.table_class thead tr {
				background-color: aquamarine;
			}
			
			.table_class tbody tr:nth-child(even) {
				background-color: #FFFFFF;
			}
			
			.table_class tbody tr:nth-child(odd) {
				background-color: gainsboro;
			}
			
		
		</style>
	</head>
	<body class="body_class">
		<h1>充值订单列表</h1>
		
		<table class="table_class">
			<thead>
				<tr>
					<td>订单号</td> 
					<td>充值金额</td>
					<td>欢乐豆数量</td>
					<td>下单时间</td>
					<td>订单状态</td>
				</tr>
			</thead>
			<tbody id="mytbody">
				
			</tbody>
		</table>
		
		<!-- 支付进行中...弹出框 -->
		<div id="paydialog" style="display: none;">
			<div style="width: 100%; height: 100%; 
				display: flex; 
				flex-direction: column; 
				align-items: center;
				justify-content: center;">
				<span>正在支付.....</span>
				<button onclick="payQuery()" style="margin-top: 40px;">支付已完成</button>
			</div>
		</div>
	</body>
</html>
